require('./PageElectivecourses.styl');

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
import { Boxs, NavBar, Context, Toast } from 'saltui';
import { Control } from 'react-keeper';
const { HBox, Box, VBox } = Boxs;
const classNames = require("classnames")
const Girdview = require('components/girdview');
const Problem = require('images/svg/problem.svg');
class Electivecourses extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            itemsList: [],//7门课组合列表
            courseList: [],//7门课列表
            activeId: null,
            selectedMap: null

        };
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this);
        this.handleOnRightClick = this.handleOnRightClick.bind(this);
        this.handleClickBand = this.handleClickBand.bind(this);
        this.handleClickItem = this.handleClickItem.bind(this);
        this.handleClickHelp = this.handleClickHelp.bind(this);
        this.selectedArr = [];//保存选中的课程名称
        this.emptyArr = null;//保存选中的课程列表项
        this.allItemsList = null;
    }
    handleOnLeftClick() {
        Control.go(-1)
    }
    handleOnRightClick() {
        if (this.state.activeId) {
            Actions.submit({ itemsId: this.state.activeId })
        } else {
            Toast.show({
                type: 'error',
                content: '请选择套餐'
            });
        }
    }
    handleClickHelp() {
        Actions.gethelp();
    }
    //点击选课列表
    handleClickBand(index, selected) {
        let arr = this.state.courseList;
        if (this.selectedArr.length == 3 && !selected) {
            return;
        }
        let sum = 0;
        let emptyArr = [];
        if (!selected) {
            for (let [key, item] of arr.entries()) {
                if (item.selected || key == index) {
                    ++sum;
                    emptyArr.push(item.courseName);
                }
            }
            this.selectedArr = emptyArr;
        } else {
            if (this.selectedArr.length > 0) {
                for (let [key, item] of this.selectedArr.entries()) {
                    if (item == arr[index].courseName) {
                        this.selectedArr.splice(key, 1);
                        break;
                    }
                }
            }
        }
        if (sum < 4) {
            arr[index].selected = !arr[index].selected;
            let judge = arr[index].selected;
            this.setState({ courseList: arr }, () => {
                if (!this.emptyArr) {
                    this.emptyArr = this.allItemsList;
                }
                let judgeArr = [];
                if (judge) {
                    judgeArr = this.emptyArr;
                } else {
                    judgeArr = this.allItemsList;
                }
                for (let [key, item] of this.selectedArr.entries()) {
                    this.emptyArr = Array.from(judgeArr).filter(subitem => {
                        return subitem.name.includes(item)
                    })
                    judgeArr = this.emptyArr;
                }
                if (this.selectedArr.length == 0) {
                    this.emptyArr = this.allItemsList;
                }
                this.setState({ activeId: null, itemsList: this.emptyArr })
            })
        }
    }
    handleClickItem(index, id) {
        if (this.state.activeId != id) {
            this.setState({ activeId: id })
        }
    }
    render() {
        return (
            <div className="electivecourses">
                <NavBar
                    className={classNames({ "ios-nav-bar": window.isIphone })}
                    isShow={false}
                    title='开始选课'
                    onLeftClick={this.handleOnLeftClick}
                    onRightClick={this.handleOnRightClick}
                    rightText={this.state.selectedMap && JSON.stringify(this.state.selectedMap) == "{}" ? '提交' : ''}
                />
                <div className="electivecourses-content">
                    <div className="electivecourses-content-head">
                        <span>{this.state.className}</span>
                        <span>筛选</span>
                        <span className="t-ML5 t-FAR">(只能选3门课程)</span>
                    </div>
                    <Girdview
                        girdItems={this.state.courseList}
                        col={4}
                        handleClick={this.handleClickBand}
                        type="courseList"
                        ref="courseList"
                    />
                    <HBox vAlign="center" className="electivecourses-content-head">
                        <Box flex={1} className="">课程组合</Box>
                        <Box flex={1} className="t-FAR" onClick={this.handleClickHelp}>
                            <Problem width='14' height='14' fill='#999' />
                            <span className="t-ML4">专业及大学</span>
                        </Box>
                    </HBox>
                    <Girdview
                        ref="itemsList"
                        girdItems={this.state.itemsList}
                        col={2}
                        handleClick={this.handleClickItem}
                        type="itemsList"
                        activeId={this.state.activeId}
                    />
                </div>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        let cb = (itemsList) => {
            this.allItemsList = itemsList;
        }
        Actions.fetch({ ...Control.state }, cb);
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Electivecourses, Reflux.connect(Store));

module.exports = Electivecourses;
